import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

Window {
    width: 800
    height: 600
    visible: true
    title: qsTr("Hello World")

    MouseArea {
        x: 0
        y: 20
        id: mouseArea1
        width: 100
        height: 100
        acceptedButtons: Qt.LeftButton | Qt.RightButton
        // 光标
        cursorShape: Qt.PointingHandCursor

        hoverEnabled: true

        // 禁止鼠标事件
        enabled: true

        // 长按时间
        pressAndHoldInterval: 3000

        Rectangle {
            anchors.fill: parent
            color: "lightgray"
            border.color: "black"
        }
        // 一次点击
        onClicked: {
            console.log("mouseArea1 clicked")
        }
        // 按下
        onPressed: {
            console.log("mouseArea1 pressed")

            var ret1 = pressedButtons & Qt.LeftButton
            var ret2 = pressedButtons & Qt.RightButton

            console.log(ret1 ? "left" : ret2 ? "right" : "none")


        }
        // 松开
        onReleased: {
            console.log("mouseArea1 released")  
        }

        // 悬停  hoverEnabled: true
        // 按下后 拖出拖入界面提示   hoverEnabled: false
        onHoveredChanged: {
            console.log("mouseArea1 hovered changed")
        }

        // 按下后 拖出拖入界面提示

        onContainsPressChanged: {
            console.log("mouseArea1 contains press changed")
        }

        onMouseXChanged: {
            console.log("mouseArea1 mouse x changed: " + mouseX)
        }   

        onMouseYChanged: {
            console.log("mouseArea1 mouse y changed: " + mouseY)
        }

        // 长按触发
        onPressAndHold: {
            console.log("mouseArea1 press and hold")
        }
    
        
    }

    // 可拖拽的矩形
    // 外层矩形容器，作为整个组件的容器
    Rectangle {
        id: container  // 容器的唯一标识符
        x: 0; y: 140   // 容器在父元素中的位置坐标
        width: 600; height: 100  // 容器的尺寸
        color: "lightgray"  // 容器的背景颜色
        border.color: "black"  // 容器的边框颜色
        // 内层矩形，作为可拖动的元素
        Rectangle {
            id: rect  // 内层矩形的唯一标识符
            width: 80; height: 80  // 内层矩形的尺寸
            color: "red"  // 内层矩形的颜色
            // 根据矩形在容器中的位置计算透明度，越靠右越透明
            opacity: (600.0 - rect.x) / 600

            // 鼠标区域，用于处理鼠标事件
            MouseArea {
                anchors.fill: parent  // 鼠标区域覆盖整个父元素（内层矩形）
                drag.target: rect  // 设置拖动目标为内层矩形
                // drag.axis: Drag.XAxis  // 限制只能在X轴方向拖动
                drag.minimumX: 0  // 设置拖动的最小X坐标，防止拖出容器左侧
                drag.maximumX: container.width - rect.width  // 设置拖动的最大X坐标，防止拖出容器右侧
            }
        }
    }


    Rectangle {
        x: 0; y: 300

        width: 300
        height: 260

        Rectangle {
            // x: 0; y: 300

            width: 300; height: 240
            color: "lightsteelblue"

            MouseArea {
                anchors.fill: parent
                drag.target: parent;
                drag.axis: "XAxis"
                drag.minimumX: 30
                drag.maximumX: 300
                // drag.filterChildren: true
                // 拖动是否影响子元素
                drag.filterChildren: false

                Rectangle {
                    color: "yellow"
                    x: 50; y : 50
                    width: 100; height: 100
                    MouseArea {
                        anchors.fill: parent
                        onClicked: console.log("Clicked")
                    }
                }
            }
        }
    }


    Rectangle {
        x: 600; y: 400
        id: rect1
        color: "yellow"
        width: 100; height: 100

        MouseArea {
            anchors.fill: parent
            onClicked: console.log("clicked yellow")
        }

        Rectangle {

            anchors.left: rect1.left
            color: "blue"
            width: 50; height: 50

            MouseArea {
                anchors.fill: parent
                // click事件是否传播到父元素
                propagateComposedEvents: true
                onClicked: {
                    console.log("clicked blue")
                    // mouse.accepted = true
                    // click事件是否传播到父元素

                    mouse.accepted = false
                }
            }
        }
}

    

    Button {
        id: btn1
        x: 300
        y: 20
        width: 40
        height: 40
        focus: true
        objectName: "btn1"
        background:Rectangle {
            border.color: btn1.focus ? "blue" : "red"
        }

    }
    Button {
        id: btn2
        x: 400
        y: 20
        width: 40
        height: 40

        focus: true
        objectName: "btn2"
        background:Rectangle {
            border.color: btn2.focus ? "blue" : "red"
        }


    }
    

}
